<template>
  <div class="page">
    <headerbar>{{ title }}</headerbar>
    <cube-scroll
      ref="scroll"
      :options="options"
      @scroll-end="scrollEnd"
      @pulling-up="onPullingUp"
      @pulling-down="onPullingDown"
    >
    <section >
      <fetchData class="project-tip" :loading="isLoading" :data="swipeData"></fetchData>

<!--      <div class="top">-->
<!--        <img-->
<!--          src="../../../../static/images/dangjian/mall/step_active.png"-->
<!--          alt-->
<!--        />-->
<!--        <p class="info">退回成功！</p>-->
<!--&lt;!&ndash;        <p class="time">&ndash;&gt;-->
<!--&lt;!&ndash;          <span></span>&ndash;&gt;-->
<!--&lt;!&ndash;        </p>&ndash;&gt;-->
<!--      </div>-->
      <div class="bottom" v-for="item in swipeData" :key="item.id">
        <div class="item one">
          预约时间
          <span class="jf">
            {{getTimeDay(item.createTime)}}
          </span>
        </div>
        <div class="item one">
          退回时间
          <span class="jf">
            {{getTimeDay(item.cancelDate)}}
          </span>
        </div>
        <div class="item two">
          退回理由
          <span class="ly">{{getTypeOption(item.cancelKey)}}</span>
        </div>
        <div v-if="item.cancelNote" class="item two">
          备注
          <span class="ly">{{item.cancelNote}}</span>
        </div>
      </div>

<!--      <div class="pdv-6 pdh-6">-->
<!--        <div-->
<!--          class="default-block-btn"-->
<!--          v-preventReClick="1000"-->
<!--          @click="tools.back()"-->
<!--        >-->
<!--          关闭-->
<!--        </div>-->
<!--      </div>-->

      <div class="text-center no-data" :loading="isLoading" :data="data"
           v-if="!isLoading && swipeData.length===0 ">
        <img src="../../../../static/images/no_data.png">
        <p>暂无数据</p>
      </div>
      <on-bottom v-else-if="onBottom"></on-bottom>
    </section>
    </cube-scroll>
  </div>
</template>

<script>
import tools from "@/utils/tools";
import api from "@/common/config/api";
import moment from "moment";
export default {
  data() {
    return {
      typeOptions:[],
      swipeData:[],
      pageIndex:1,
      orderId:'',
      data: JSON.parse(sessionStorage.getItem("revocationDetail")), //撤销详情
      title: "撤销记录",
      isLoading: true,
      onBottom:false,
      showNoData: false,
      fn: tools,
      options: {
        pullUpLoad: true,
        pullDownRefresh: {
          threshold: 90,
          stop: 0,
          txt: ' '
        },
        scrollbar: false
      },
    };
  },
  created() {
    this.orderId  = this.data.id
    this.swipeData = []
    console.log('this.orderIdthis.orderId',this.orderId);
    this.getDictValue()
    this.loadData()
  },
  mounted() {
    console.log('mounted', this.scrollToY)
    if (this.scrollToY) {
      setTimeout(() => {
        this.scrollTo()
      }, 10)
    }
  },
  methods: {
    loadData(){
      this.isLoading = true
      let data = {
        orderId: this.orderId,
        pageNo:  this.pageIndex,
        pageSize: 10
      }
      return this.fetchService.getCancelByOrder(data).then(res => {
        this.isLoading = false
        if (res.code !== 0) {
          return
        }
        if (res.data.length < 1) {
          this.onBottom =true
          this.$refs.scroll.forceUpdate && this.$refs.scroll.forceUpdate();
          this.options.pullUpLoad = false
          return
        }
        this.pageIndex++;
        this.swipeData = this.swipeData.concat(res.data)
        console.log('this.swipeDatathis.swipeData',this.swipeData);
        setTimeout(() => {
          this.$refs.scroll && this.$refs.scroll.forceUpdate && this.$refs.scroll.forceUpdate(true, false)
        }, 100)
      })

    },
    scrollEnd(pos) {
      console.log('scrollEnd', pos)
      this.scrollToY = pos.y
    },
    scrollTo() {
      this.$refs.scroll.scrollTo(
        0,
        this.scrollToY,
        0,
        ''
      )
    },
    onPullingUp() {
      console.log('onPullingUp')
      this.loadData()
    },
    onPullingDown() {
      this.options.pullUpLoad = true
      this.onBottom = false
      this.swipeData = []
      console.log('onPullingDown')
      this.pageIndex = 1
      this.loadData()
    },
    getTimeDay (createTime) {
      if (!createTime) {
        return ''
      }
      return moment(createTime).format('MM月DD日 HH:mm:ss')
    },
    getDictValue () {
      let data={
        catKey:'CAT_MALL_',
        treeKey:'DDCXZ'
      }
      this.fetchService.dictValue(data).then(res => {
        if(res.code === 0){
          this.typeOptions = res.data
        }
      })
    },
    getTypeOption(key){
      let value = '其他'
      for (let item of this.typeOptions) {
        if(item.key === key){
          value =  item.value
          break
        }
      }
      return value
    }
  },

};
</script>

<style scoped lang="scss">
@import "@/common/stylus/moon.scss";
.top {
  background: #ffffff;
  font-size: $tipFontSize;
  text-align: center;
  padding: 60px 0 40px;
  .info {
    font-size: $titleFontSize;
    line-height: 48px;
    color: #343434;
  }
  .time {
    color: #9a9a9a;
    >span{
      font-size: 16PX;
    }
  }
}
.bottom {
  background: #ffffff;
  margin: 20px 0;
  font-size: $tipFontSize;
  .item {
    padding: 0 0.4rem;
    line-height: 90px;
    color: #9a9a9a;
  }
  .one {
    border: 1px solid #e5e5e5;
    .jf {
      /*color: #e20002;*/
      line-height: 90px;
      float: right;
    }
  }
  .two {
    overflow: auto;
    border: 1px solid #e5e5e5;
    .ly {
      max-width: 80%;
      color: #343434;
      float: right;
      word-wrap: break-word;
      word-break: normal;
      line-height: inherit;
    }
  }
}
</style>
